<template>
	<view class="overflow-hidden">
		<view class="bg-dark" :style="{ height: `${menuButtonInfo.top}px`}"></view>
		
		<view id="top-area" class="w-full bg-drak" style="z-index: 9;" :style="{ top: `${menuButtonInfo.top}px` }">
			<view class="w-full dflex-b padding-lr-sm" :style="{ height: `${menuButtonInfo.height}px`, lineHeight: `${menuButtonInfo.height}px` }">
				<view class="dflex-c" @click="to('/sub-shopping/pages/user')">
					<view class="dflex-c dflex-flow-c margin-left-sm">
						<image :src="member.member_headimg || '/static/images/user/default.png'" class="border-radius-lg headimg" style="width: 80rpx; height: 80rpx;" mode=""></image>
					</view>
					<view class="fwb fs-30 margin-left-xs">
						{{ member.member_nickname || appabbr }}
					</view>
				</view>
				<view class="dflex-c bg-main border-radius-lg h-full padding-lr-lg border-line" :style="{ marginRight: `${menuButtonInfo.width + 10}px` }" @click="search">
					<text class="iconfont iconsousuo-01 fwbd ft-dark-3"></text>
				</view>
				<view v-if="false" class="flex1 margin-left-sm" :style="{ marginRight: `${menuButtonInfo.width + 10}px` }">
					<view class="bg-main border-radius-lg dflex" :style="{ height: `${menuButtonInfo.height}px`, lineHeight: `${menuButtonInfo.height}px` }">
						<input type="text" placeholder="输入关键词" class="w-full padding-lr" />
						<view class="dflex-c bg-base border-radius-lg h-full padding-lr-lg" @click="search">
							<text class="iconfont iconsousuo-01"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="w-full margin-top-sm">
				<scroll-view scroll-x scroll-anchoring scroll-with-animation class="ws-np" :scroll-left="scrollLeft">
					<view class="dflex margin-left-sm">
						<!-- 骨架屏 -->
						<view class="use-skeleton pos-r margin-left-xs margin-right-xs padding-tb-sm padding-lr-lg dflex tab-sub" 
							style="background: #d8d8d8; height: 48rpx;"
							v-for="(item, idx) in skeleton.navArrs" :key="idx"></view>
						
						<block v-for="(item, idx) in navDatas" :key="idx">
						<view class="pos-r padding-tb-sm padding-lr tab-sub line-height-1 tac" 
							:class="{ active: idx === curTab }" @click="curTab = idx">
							{{ item.name }}
							<view v-if="item.name == '关注'" class="badge">{{ item.cnt || 0 }}</view>
						</view>
						</block>
						
						<!-- 最后一个加上占位 -->
						<view class="padding"></view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view v-if="loaded" class="goodsContent border-radius">
			<swiper 
				skip-hidden-item-layout
				:duration="300"
				:current="curTab"
				:style="{ width: '100vw', height: swiperHeight }"
				@change="swiperChange">
				<swiper-item v-for="(nav, idx) in navDatas" :key="idx">
					<scroll-view scroll-y scroll-anchoring scroll-with-animation class="h-full" :id="idx" 
						:scroll-top="tabDatas['u_' + idx].top"
						@scrolltoupper="toUpper"
						@scrolltolower="toLower"
						@scroll="scrollChange">
						<view class="dflex padding-top-sm padding-lr dflex-s">
							<!-- 左侧 -->
							<view class="margin-right-xs wpre-50 overflow-hidden">
								<view class="dflex-b dflex-wrap-w">
									<view class="product-box pos-r" v-for="(item, pidx) in tabDatas['u_' + idx].left" :key="item._id" :id="'l_' + idx + '_' + item._id" @click="toDetail(item)">
										<view class="bg-main margin-bottom-sm border-radius">
											<view class="pos-r dflex-c" style="width: 335rpx;height: 335rpx;">
												<image lazy-load class="wh-full" :src="item.img" mode="aspectFill"></image>
												<view v-if="item.isvideo" class="iconfont iconbofang pos-a ft-base fs-xl" style="top: 10rpx; right: 10rpx;"></view>
											</view>
											<view class="padding-lr-sm margin-top-sm clamp-2">
												{{ item.isad ? item.title || '广告标题' : item.note_title}}
											</view>
											<view v-if="item.isad" class="fs-xxs ft-dark padding-lr-sm margin-tb-sm">
												<text class="tag-ad">广告</text> {{ item.name }}
											</view>
											<view v-if="!item.isad" class="dflex-b padding-lr-sm margin-tb-sm">
												<view class="dflex flex1" style="width: 60%;" @click.stop="toUser(item)">
													<image :src="item.create_uheadimg || '/static/images/user/default.png'" class="border-radius-c headimg" style="width: 50rpx; height: 50rpx;"></image>
													<view class="ft-dark margin-left-xs fs-xxs">{{item.create_uname}}</view>
												</view>
												<view class="dflex" @click.stop="toLikes(item)">
													<view class="iconfont animated" :class="[ item.likes ? 'ft-base iconaixin-01' : 'iconaixin', item.islikes ? 'scale' : '' ]"></view>
													<view class="clamp ft-dark margin-left-xs fs-xxs">{{item.note_praise || 0}}</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 右侧 -->
							<view class="margin-left-xs wpre-50 overflow-hidden">
								<view class="dflex-b dflex-wrap-w">
									<view class="product-box pos-r" v-for="(item, pidx) in tabDatas['u_' + idx].right" :key="item._id" :id="'r_' + idx + '_' + item._id" @click="toDetail(item)">
										<view class="bg-main margin-bottom-sm border-radius">
											<view class="pos-r dflex-c" style="width: 335rpx;height: 335rpx;">
												<image lazy-load class="wh-full" :src="item.img" mode="aspectFill"></image>
												<view v-if="item.isvideo" class="iconfont iconbofang pos-a ft-base fs-xl" style="top: 10rpx; right: 10rpx;"></view>
											</view>
											<view class="padding-lr-sm margin-top-sm clamp-2">
												{{ item.isad ? item.title || '广告标题' : item.note_title}}
											</view>
											<view v-if="item.isad" class="fs-xxs ft-dark padding-lr-sm margin-tb-sm">
												<text class="tag-ad">广告</text> {{ item.name }}
											</view>
											<view v-if="!item.isad" class="dflex-b padding-lr-sm margin-tb-sm">
												<view class="dflex flex1" style="width: 60%;" @click.stop="toUser(item)">
													<image :src="item.create_uheadimg || '/static/images/user/default.png'" class="border-radius-c headimg" style="width: 50rpx; height: 50rpx;"></image>
													<view class="ft-dark margin-left-xs fs-xxs">{{item.create_uname}}</view>
												</view>
												<view class="dflex" @click.stop="toLikes(item)">
													<view class="iconfont animated" :class="[ item.likes ? 'ft-base iconaixin-01' : 'iconaixin', item.islikes ? 'scale' : '' ]"></view>
													<view class="clamp ft-dark margin-left-xs fs-xxs">{{item.note_praise || 0}}</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							
							</view>
						</view>
						
						<!-- 空白页 -->
						<use-empty-emoji v-if="tabDatas['u_' + idx].loaded && tabDatas['u_' + idx].empty" e-style="round" e-type="note"
							tip=" " btn-tip="去写笔记" height="80vh" :auto="false" @to="to('/sub-shopping/pages/note')"></use-empty-emoji>
						
						<!-- 上拉加载更多 -->
						<use-loadmore v-if="tabDatas['u_' + idx].loaded && !tabDatas['u_' + idx].empty && tabDatas['u_' + idx].hasmore" 
							:type="tabDatas['u_' + idx].loadingType"></use-loadmore>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 写笔记 -->
		<view class="fixed-top" @click="to('/sub-shopping/pages/note')"><text class="iconfont iconjia fwbd"></text></view>
		
		<!-- 置顶 -->
		<use-totop ref="usetop" bottom="150" type="tabbar" @to="toRefresh"></use-totop>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		computed: {
			...mapState(['member', 'islogin']),
			menuButtonInfo() {
				return this.$api.navbar;
			},
			appabbr() {
				return this.$config.appabbr;
			}
		},
		data() {
			let tabMax = 30;
			let tabDatas = {};
			for (let i = 0; i < tabMax+2; i++) {
				tabDatas['u_' + i] = { 
					datas: [], 			// 总数据 ids
					left: [], 			// 左侧数据
					right: [], 			// 右侧数据
					page: 1, 			// 页数
					cnt: 0, 			// 总数据量
					top: 0, 			// 设置滚动条 top 值
					empty: false, 		// 数据为空
					hasmore: false, 	// 存在未加载数据
					loadingType: 'more',
					loaded: false,
					ids: [], 
					val: null
				};
			}
			
			return {
				scrollLeft: 0,
				
				loaded: false,
				curTab: 0,
				tabMax: tabMax,
				tabDatas: tabDatas,
				tabEles: [],
				navDatas: [],
				reqData: {
					rows: 30
				},
				swiperHeight: '100vh',
				screenWidth: 0,
				
				skeleton: {
					navArrs: new Array(10)
				}
			};
		},
		watch: {
			curTab(val) {
				// 动态计算 scrollLeft
				if (this.tabEles[val].left > this.screenWidth / 2) {
					console.log('this.tabEles[val]', this.tabEles.length, val, this.tabEles[val]);
					if (val == this.tabEles.length - 1) {
						this.scrollLeft = this.tabEles[val].left - this.screenWidth / 2;
						return;
					}
					this.scrollLeft = this.tabEles[val].left - this.screenWidth / 2 + this.tabEles[val].width / 2;
				} else {
					this.scrollLeft = 0;
				}
			}
		},
		// 用户点击右上角分享
		// https://uniapp.dcloud.io/api/plugins/share?id=showsharemenu
		onShareAppMessage: function(ops) {
			let _this = this,
				mid = 0;
		
			if (_this.member && _this.member._id) {
				mid = _this.member._id;
			}
		
			return {
				title: this.$config.appslogan || '用云 · 让开发更简单',
				path: `/pages/tabbar/shopping?mid=${mid}`,
				// imageUrl: 'https://mall-os-api.use-cloud.com/files/upload/image/20200408/200408115587860242.jpg',
				success: function(res) {
					// 转发成功
					console.log('转发成功', res);
				},
				fail: function(res) {
					// 转发失败
					console.log('转发失败', res);
				}
			};
		},
		// 上拉加载更多
		onReachBottom(res) {
			console.log('onReachBottom', res);
		},
		onPageScroll(e) {
			this.$refs.usetop.change(e.scrollTop);
		},
		onLoad() {
			this.loadData(() => {
				// 加载当前tab、下一个tab数据
				this.loadNoteDatas(0, this.curTab + 1);
			});
			
			this.$api.get_env(res => {
				this.screenWidth = res.screenWidth;
				console.log('this.screenWidth', this.screenWidth);
			});
			
			// 点赞数据同步
			uni.$on('__shopping_likes', (res) => {
				console.log('点赞数据同步 shopping ', res);
				let operData;
				for (let key in this.tabDatas) {
					operData = this.tabDatas[key].left.find(x => x._id == res.note._id);
					if (operData && operData._id) {
						operData.likes = res.likes;
						operData.note_praise += res.likes ? 1 : -1;
					}
					
					operData = this.tabDatas[key].right.find(x => x._id == res.note._id);
					if (operData && operData._id) {
						operData.likes = res.likes;
						operData.note_praise += res.likes ? 1 : -1;
					}
				}
			});
			
			// 收藏数据同步
			uni.$on('__shopping_collect', (res) => {
				console.log('收藏数据同步 shopping ', res);
				let operData;
				for (let key in this.tabDatas) {
					operData = this.tabDatas[key].left.find(x => x._id == res.note._id);
					if (operData && operData._id) {
						operData.collect = res.collect;
						operData.note_collect += res.collect ? 1 : -1;
					}
					
					operData = this.tabDatas[key].right.find(x => x._id == res.note._id);
					if (operData && operData._id) {
						operData.collect = res.collect;
						operData.note_collect += res.collect ? 1 : -1;
					}
				}
			});
			
			// 添加笔记后，自动刷新对应类别 tab 选项数据
			uni.$on('__shopping_add', (res) => {
				console.log('自动刷新数据 shopping ', res);
				//if (res && res.cid) {
					let navIdx = this.navDatas.findIndex(x => x._id == res.cid);
					console.log('navIdx', navIdx);
					if (this.curTab == 0) {
						// 刷新当前选项卡 '全部'
						this.initCurData();
						this.loadNoteDatas();
					} else if (navIdx === -1) {
						// 没有选择商品，初始化选项卡 '全部'
						this.initCurData(0);
					}
					
					if (navIdx !== -1) {
						let curData = this.tabDatas[`u_${navIdx}`];
						
						// 选择了商品，已经请求，重新初始化
						if (curData && curData.loaded) {
							this.initCurData(navIdx);
						}
					}
					
					if (navIdx == this.curTab) {
						// 刷新当前选项卡
						this.initCurData();
						this.loadNoteDatas();
					}
				//}
			});
		},
		methods: {
			loadData(callback) {
				
				this.$db['usemall-goods-category'].where({ 
					state: '启用', 
					pid: ''
				})
					.tolist({ rows: this.tabMax, orderby: 'sort asc' })
					.then(res => {
						console.log('category res', res);
						
						if (res.code === 200) {
							this.navDatas = [{ name: '全部' }, ...res.datas];
							this.navDatas.forEach((item, idx) => {
								this.initCurData(idx);
							});
							
							if (typeof callback === 'function') callback();
							
							this.skeleton.navArrs.length = 0;
							this.$nextTick(async () => {
								this.tabEles = [];
								const view = uni.createSelectorQuery().in(this);
								view.selectAll(`.tab-sub`)
									.boundingClientRect(datas => {
										this.tabEles = Object.freeze(datas);
										console.log('tabEles', this.tabEles);
									})
									.exec()
								
								view.selectAll(`#top-area`)
									.boundingClientRect(datas => {
										console.log('topHeight', datas[0]);
										const __topHeight = datas[0].height;
										
										let __height = `calc(100vh - ${this.menuButtonInfo.top}px - ${__topHeight}px)`;
										// #ifdef H5
										__height = `calc(100vh - ${this.menuButtonInfo.top}px - ${__topHeight}px - 50px - env(safe-area-inset-bottom))`;
										// #endif
										
										// #ifdef APP
										if (this.$env.mobileType !== 'android') {
											__height = `calc(100vh - ${this.menuButtonInfo.top}px - ${__topHeight}px - env(safe-area-inset-bottom))`;
										}
										// #endif
										
										this.swiperHeight = __height
									})
									.exec()
							});
						}
					});
			},
			// 设置请求参数值
			setReqData(cur, data, datas) {
				cur.val = data.create_time;
				cur.ids = datas.filter(x => x.create_time == cur.val).map(x => x._id);
			},
			initCurData(idx) {
				if (typeof idx === 'undefined') idx = this.curTab;
				
				let curData = this.tabDatas[`u_${idx}`];
				// 清除存储的分页条件数据
				curData.val = null;
				curData.ids = [];
				curData.page = 1;
				curData.cnt = 0;
				curData.datas = [];
				curData.empty = false;
				curData.hasmore = true;
				curData.loadingType = 'more';
				
				return curData;
			},
			// 加载笔记数据
			// cur	当前 tab
			// next	下一个 tab
			loadNoteDatas(cur, next) {
				let __curidx = cur || this.curTab;
				console.log('this.tabDatas', this.tabDatas, cur, __curidx, next);
				let curData = this.tabDatas[`u_${__curidx}`];
				if (['loading', 'nomore'].includes(curData.loadingType)) { 
					
					if (next && next < this.navDatas.length - 1 && this.tabDatas['u_' + next].cnt <= 0) {
						// 加载下一个 tab 数据
						console.log('加载下一个 tab 数据', cur, next);
						this.loadNoteDatas(next);
					}
					
					//防止重复加载
					return; 
				}
				// 当前数据加载中
				curData.loadingType = 'loading';
				
				// 加载中
				if (__curidx == this.curTab && !curData.loaded) {
					uni.showLoading({
						title: '加载中'
					})
				}
				
				// 当前分类
				this.reqData.tid = this.navDatas[__curidx]._id || this.navDatas[__curidx].name;
				this.reqData.ids = curData.ids;
				this.reqData.val = curData.val;
				//this.reqData.keyword = ''
				
				this.$func.usemall.call('shopping/list', this.reqData).then(res => {
					uni.hideLoading();
					
					if (!this.loaded) this.loaded = true;
					if (!curData.loaded) curData.loaded = true;
					
					console.log('shopping.list res', res, );
					if (res.code == 200) {
						let leftDatas = [];
						let rightDatas = [];
						
						let lastData = {};
						if (res.datas && res.datas.length) {
							lastData = res.datas[res.datas.length - 1];
						}
						
						if (res.result && res.result.param && res.result.param.ads) {
							// 指定位置插入广告
							const ads = res.result.param.ads;
							ads.forEach((x, idx) => {
								//if (x.pos.location < curData.cnt + res.datas.length + 1) {
									res.datas.splice(x.location - 1, 0, {
										...x,
										_id: res.result.param._id + '_' + idx,
										isad: 1
									});
								//}
							});
						}
						
						const datasLength = res.datas.length;
						if (datasLength <= 0 || datasLength < this.reqData.rows) {
							// 当前数据为空或返回数据小于请求 rows，则没有更多数据
							curData.loadingType = 'nomore';
						} else {
							curData.loadingType = 'more';
							curData.page == 1 ? curData.hasmore = !0 : null;
						}
						
						res.datas.forEach((x, i) => {
							if (curData.datas.find(p => p == x._id)) return;
							
							// 当前数据的顺序
							x.__idx = curData.cnt + i;
							
							// 是否已点赞
							x.likes = x.likes || false;
							x.islikes = false;
							
							if (x.note_imgs && x.note_imgs.length > 0) {
								x.img = x.note_imgs[0].url;
							} 
							
							if (x.note_video && x.note_video.url) {
								// 避免黑屏，截取5s视频帧
								x.img = x.note_video.url + '?x-oss-process=video/snapshot,t_5000,f_jpg,w_750,m_fast';
								x.isvideo = true;
							}
							
							i % 2 == 0 ? leftDatas.push(x) : rightDatas.push(x);
							
							// if (i+1 == datasLength) {
							// 	// 设置最后一条请求参数值
							// 	this.setReqData(curData, x, res.datas);
							// }
						});
						
						if (lastData && lastData._id) {
							// 设置最后一条请求参数值
							this.setReqData(curData, lastData, res.datas);
						}
						
						// 第一页
						if (curData.page == 1) {
							curData.cnt = 0;
							curData.left = leftDatas;
							curData.right = rightDatas;
							curData.datas = res.datas.map(x => x._id);
						} else {
							curData.left = [...curData.left, ...leftDatas];
							curData.right = [...curData.right, ...rightDatas];
							curData.datas = [...curData.datas, ...res.datas.map(x => x._id)];
						}
						
						curData.page++;
						
						// 记录总数据数
						curData.cnt = curData.left.length + curData.right.length;
						
						// 当前数据为空
						curData.empty = false;
						if (curData.cnt <= 0) {
							curData.empty = true;
						}
						
						if (next && next < this.navDatas.length - 1 && this.tabDatas['u_' + next].cnt <= 0) {
							// 加载下一个 tab 数据
							console.log('加载下一个 tab 数据', cur, next);
							this.loadNoteDatas(next);
						}
					}
				});
			},
			scrollChange(e) {
				this.tabDatas['u_' + this.curTab].scrollTop = e.detail.scrollTop;
				this.$refs.usetop.change(e.detail.scrollTop);
			},
			swiperChange(e) {
				// console.log('swiperChange', e);
				if (e.detail) {
					this.curTab = e.detail.current;
					this.$refs.usetop.change(this.tabDatas['u_' + this.curTab].scrollTop);
					
					// 加载当前与下一个
					this.loadNoteDatas(0, this.curTab + 1);
				}
			},
			// 置顶刷新
			toRefresh() {
				this.tabDatas['u_' + this.curTab].top = this.tabDatas['u_' + this.curTab].scrollTop;
				this.$nextTick(() => {
					this.tabDatas['u_' + this.curTab].top = 0;
				})
				this.tabDatas['u_' + this.curTab].refresh = true;
			},
			// 滚动到顶部
			toUpper(res) {
				if (res.currentTarget.id == this.curTab && this.tabDatas['u_' + this.curTab].refresh) {
					this.tabDatas['u_' + this.curTab].refresh = false;
					this.initCurData();
					this.loadNoteDatas();
				}
			},
			// 上滑到底部，加载下一页
			toLower(res) {
				if (res.currentTarget.id == this.curTab) {
					this.loadNoteDatas();
				}
			},
			// 个人中心
			toUser(item) {
				uni.navigateTo({
					url: '/sub-shopping/pages/user?id=' + item.create_uid
				})
			},
			// 点赞|取消点赞
			toLikes(item) {
				if (!this.islogin) {
					this.$api.tologin()
					return;
				}
				
				if (item.islikes) return;
				item.islikes = true;
				
				console.log('toLikes', item);
				let url = 'shopping/likes';
				
				if (item.likes) {
					url = 'shopping/likesCancel';
					item.note_praise--;
					if (item.note_praise < 0) item.note_praise = 0;
				} else {
					item.note_praise++;
				}
				
				item.likes = !item.likes;
				this.$func.usemall.call(url, { id: item._id }).then(res => {
					console.log('toLikes', url, res);
					item.islikes = false;
					if (res.code == 200) {
						return;
					}
					
					this.$api.msg(res.msg);
					item.likes = !item.likes;
					if (item.likes) {
						item.note_praise++;
					} else {
						item.note_praise--;
						if (item.note_praise < 0) item.note_praise = 0;
					}
				})
			},
			// 跳转详情页
			toDetail(res) {
				console.log('res', res);
				if (res && res.isad) {
					// 点击广告
					if (res.type == '页面') {
						uni.navigateTo({
							url: res.url
						})
					} else if (res.type == '网页') {
						this.toWeb(res.url);
					} else if (res.type == '内容') {
						this.toContent(res);
					} 
					return;
				}
				
				uni.setStorage({
					key: '__shopping_detail_data',
					data: res
				});
				uni.setStorage({
					key: '__shopping_detail_datas',
					data: [...this.tabDatas['u_' + this.curTab].left.filter(x => !x.isad && x._id !== res._id), ...this.tabDatas['u_' + this.curTab].right.filter(x => !x.isad && x._id !== res._id)]
				});
				
				uni.navigateTo({
					url: `/sub-shopping/pages/detail?id=${res._id}`
				});
			},
			toContent(item) {
				const content =
					`<div class="__rich_text">${item.content.replace(/<h1/gi, '<h1 class="use-p"').replace(/<h3/gi, '<h3 class="use-p"').replace(/<p/gi, '<p class="use-p"')}</div>`;
			
				uni.setStorage({
					key: '__rich_text',
					data: content,
					success() {
						uni.navigateTo({
							url: '/pages/content/rich-text'
						})
					}
				})
			},
			toWeb(url) {
				uni.navigateTo({
					url: `/pages/content/web?url=${url}`
				});
			},
			// 统一跳转接口，拦截未登录路由
			to(url) {
				if (!this.islogin) {
					this.$api.tologin()
					return;
				}
			
				uni.navigateTo({
					url
				});
			},
			// 搜索
			search() {
				uni.navigateTo({
					url: '/sub-shopping/pages/list'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
		width: 100vw;
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - 50px) ;
		/* #endif */
	}

	.active {
		color: #ff6a6c;
		font-weight: bold;
		font-size: 34rpx;
	}
	
	.border-line {
		border: 1rpx solid rgba(0, 0, 0, .1);
	}

	.goodsContent {
		width: 100%;
		display: flex;
		justify-content: center;
		
		.ft-dark {
			color: #585858;
		}
	}

	.goodsLeftList,
	.goodsRightList {
		width: 50%;
		overflow: hidden;
	}

	.goodsLeftList {
		margin-right: 10rpx;
	}

	.goodsRightList {
		margin-left: 10rpx;
	}

	.fixed-top {
		/* #ifdef H5 */
		margin-bottom: calc(env(safe-area-inset-bottom) + 50px);
		/* #endif */
		box-shadow: 0px 0px 7px 3px rgba(0,0,0, 0.10);
	}

	.tag-ad {
		border: 1rpx solid #bbb;
		padding: 20rpx 14rpx;
		line-height: 0;
		border-radius: 6px;
		margin-right: 0px;
		transform: scale(0.8);
		transform-origin: left center;
		display: inline-block;
		color: #bbb;
	}

</style>
